<template>
  <view class="list">
    <view
      class="item"
      v-for="(item, index) in dataList"
      :key="index"
    >
      <view>
        <view class="top-container">
          <u-tag v-if="item.repair_state == 'COMPLETED' || item.repair_state == 'ALL_REPAIR'">{{ item.repair_state_name }}</u-tag>
          <u-tag v-else="item.repair_state == 'PENDING_REVIEW'" plain>{{item.repair_state_name}}</u-tag>
          <span>{{item.repair_code}}</span>
        </view>
        <span class="repair-title">{{item.repair_name}}</span>
        <u-line />
        <view class="repair-container">
          <view>
            <span>资产名称</span>
            <span>{{item.asset_name_with_count}}</span>
          </view>
          <view>
            <span>报修人</span>
            <span>{{item.repair_user_name}}</span>
          </view>
        </view>
        <u-line />
        <view class="repair-container">
          <view>
            <span>报修时间</span>
            <span>{{item.repair_date}}</span>
          </view>
          <view>
            <span>故障说明</span>
            <span>{{item.fault_description}}</span>
          </view>
        </view>
        <u-line v-show="item.repair_state === 'PENDING_REPAIR' || item.repair_state === 'REPAIRING'"/>
        <view class="repair-btn">
          <up-button 
            v-if="item.repair_state === 'PENDING_REPAIR'"
            type="primary"
            size="medium"
            plain
            text="开始维修"
            @click="handlerPendingRepair(item)"
            :customStyle="btnStyle"
          ></up-button>
          
          <up-button 
            v-if="item.repair_state === 'ALL_REPAIR'"
            type="success"
            size="medium"
            plain
            text="完成维修"
            @click="handlerAllRepair(item)"
            :customStyle="btnStyle"
          ></up-button>
          
          <up-button 
            v-if="item.repair_state === 'REPAIRING'"
            type="warning"
            size="medium"
            plain
            text="维修中"
            @click="handlerRepairing(item)"
            :customStyle="btnStyle"
          ></up-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import request from "@/api/request";

defineProps({
  dataList: {
    type: Array,
    default: () => [],
  }
});

const emit = defineEmits(['reload-data'])

// 统一按钮样式
const btnStyle = {
  height: '90rpx',
  fontSize: '32rpx',
  minWidth: '180rpx',
  borderRadius: '16rpx',
  borderWidth: '2rpx',
  fontWeight: 'bold'
}

const handlerAllRepair = (item) => {
  uni.showModal({
    title: '提示：',
    content: '是否确定完成操作?',
    cancelText: '取消',
    confirmText: '确定',
    success: res => {
      if (res.confirm) {
        request.post('/api/module/Invoke', {
          pageCode : "assetwarranty",
          params : {
            args : [
              {
                name : "interfaceCode",
                value : "Assetwarranty.repairComplete"
              },
              {
                name : "id",
                value : item.id
              }
            ]
          },
          methodName : "repairComplete"
        }).then(resp => {
          if (resp.isSuccess) {
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              complete: () => {
                emit('reload-data')
              }
            });
          }
        })
      }
    }
  })
}

const handlerRepairing = (item) => {
  uni.navigateTo({
    url: '/pages/assetRepair/detail?item=' +  JSON.stringify(item)
  })
}

const handlerPendingRepair = (item) => {
  uni.showModal({
    title: '提示：',
    content: '是否确定开始维修?',
    cancelText: '取消',
    confirmText: '确定',
    success: (res) => {
      if (res.confirm) {
        request.post('/api/module/Invoke', {
          pageCode : "assetwarranty",
          params : {
            args : [
              {
                name : "interfaceCode",
                value : "Assetwarranty.updateStatus"
              },
              {
                name : "repairMstr",
                value :{
                  id : item.id,
                  repair_state : "REPAIRING"
                }
              }
            ]
          },
          methodName : "updateStatus"
        }).then(resp => {
          if (resp.isSuccess) {
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              complete: () => {
                emit('reload-data')
              }
            });
          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  align-items: center;

  .item {
    margin: 0 20rpx 20rpx 20rpx;
    border-radius: 10rpx;
    background-color: white;
    padding: 20rpx;
    width: calc(100% - 40rpx);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    &:first-child {
      margin-top:  20rpx;
    }

    .top-container {
      display: flex;
      align-items: center;

      & > span {
        margin-left: 30rpx;
        font-weight: bold;
        font-size: 32rpx;
      }
    }

    .repair-title {
      color: #929294;
      margin: 20rpx 0;
      display: block;
      font-size: 28rpx;
    }

    .repair-container {
      display: flex;

      & > view {
        width: 50%;
        height: 140rpx;
        display: flex;
        flex-direction: column;
        padding: 5rpx;
        justify-content: center;

        & > span:first-child {
          font-size: 28rpx;
          color: #929294;
          padding-bottom: 10rpx;
        }
        
        & > span:last-child {
          font-size: 30rpx;
          color: #333;
        }
      }
    }

    .repair-btn {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 20rpx 0;
      gap: 20rpx;
    }
  }
}
</style>